<template>
    <div class="cart">
        <div class="shopping-cart">
            <div class="goods-location d-flex items-c e3">
                <span class="ico-moon ">
                    <van-icon name="location-o" size=".15rem" color="#36bc7c"/>
                </span>
                <span class="addresss-box" @click="$router.push('/address')" v-if="flag">暂无地址，请点击选择地址</span>
                <span class="trangel f-12" v-else ><i style="color:#333">默认地址:</i>{{address}}</span>
            </div>
            <div class="shopping-cart">
                <div class="goods-list" v-for="(item,i) in cartlist" :key="i">
                    <div class="checked" @click.stop="">
                        <input type="checkbox" class="check" name="" v-model="item.flag" @change.stop="checkboxs(item)">
                    </div>
                    <div class="goods-content" >
                        <div class="goods-cover">
                            <img :src="item.data.picPath" alt="">
                        </div>
                        <div class="goods-box">
                            <div class="goods-title">{{item.data.Drugname}}</div>
                            <div class="price-box">
                                <span class="price">￥{{item.data.price}}</span>
                                <div class="goods-num-box">
                                    <div class="goods-num-mius" @click.stop='subtr(item)'>-</div>
                                    <input type="number" :value="item.num" class="goods-num">
                                    <div class="goods-num-plus" @click.stop='plus(item)'>+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="delete" @click.stop='delets(item)'>删除</div>
                </div>
            </div>
        </div>
        <div class="shopping-nav">
                <div class="checkdall">
                    <input type="checkbox" class="check" name="" id="checkbig" v-model='allchecked' @change="totalbis">
                </div>
                <div class="total">
                    <label class="lin">合计</label>
                    <label class="m15">
                        <span>￥</span>
                        <span>{{ aggregate }}</span>
                    </label>
                </div>
                <div class="btn" @click.stop='addorder(item)'>结算</div>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="home-o" text="首页" @click="toHome"/>
            <van-goods-action-icon icon="apps-o" text="分类" @click="toKind"/>
            <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart"/>
            <van-goods-action-icon icon="user-o" text="我" @click="toUser"/>
        </van-goods-action>
    </div>
</template>
<script>
import Vue from 'vue'
// import axios from 'axios'
import { proFind, address, prodelete, proupdate, orderAdd } from '@/utils/api'
import {
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  SubmitBar,
  Checkbox,
  CheckboxGroup,
  Toast,
  Icon
} from 'vant'
Vue
  .use(GoodsAction)
  .use(GoodsActionIcon)
  .use(GoodsActionButton)
  .use(SubmitBar)
  .use(Checkbox)
  .use(CheckboxGroup)
  .use(Icon)
  .use(Toast)
export default {
  data () {
    return {
      checked: true,
      flag: true,
      address: '',
      cartlist: [],
      allchecked: false,
      userid: ''
    }
  },
  computed: {
    aggregate () {
      let aggregate = 0
      this.cartlist.map(item => {
        item.flag ? aggregate += item.num * item.data.price : aggregate += 0
      })
      return aggregate
    }
  },
  methods: {
    toHome () {
      this.$router.push('/home')
    },
    toKind () {
      this.$router.push('/kind')
    },
    toCart () {
      this.$router.push('/cart')
    },
    toUser () {
      this.$router.push('/user')
    },
    delets (item) {
      // console.log(item)
      // this.loginStore().then(res => {
      //   if (res.code === 200) {
      // this.cartlist.splice(index, 1)
      let userid = localStorage.getItem('userid')
      prodelete(item.cartid).then(res => {
        console.log(res.data)
        if (res.data.code === '10092') {
          Toast('删除成功')
          proFind(userid).then(res => {
            // console.log(res.data.data)
            this.cartlist = res.data.data
          })
        } else {
          Toast('删除失败')
        }
      })
      //   } else {
      //     Toast('请先登录')
      //   }
      // })
    },
    subtr (item) {
      this.loginStore().then(res => {
        // console.log(res.data)
        // if (res.data.code === 200) {
        item.num--
        if (item.num < 1) {
          item.num = 1
          Toast('不可以再少了')
        } else {
          proupdate(item.cartid, item.num).then(res => {
            if (res.data.code === '10090') {
              Toast('修改成功')
            } else {
              Toast('修改失败')
            }
          })
        }
        // } else {
        //   Toast('请先登录')
        // }
      })
    },
    plus (item) {
      if (item.num >= 200) {
        item.num = 200
        Toast('该宝贝最多为两百件')
      } else {
        // this.loginStore().then(res => {
        //   if (res.code === 200) {
        item.num++
        proupdate(item.cartid, item.num).then(res => {
          if (res.data.code === '10090') {
            Toast('修改成功')
          } else {
            Toast('修改失败')
          }
        })
        // } else {
        //   Toast('请先登录')
        // }
        // })
      }
    },
    totalbis () {
      if (this.allchecked) {
        this.cartlist.map(item => {
          item.flag = true
        })
      } else {
        this.cartlist.map(item => {
          item.flag = false
        })
      }
    },
    checkboxs (item) {
      if (item.flag) {
        let mste = this.cartlist.every(item => {
          return item.flag
        })
        if (mste) {
          this.allchecked = true
        } else {
          this.allchecked = false
        }
      } else {
        this.allchecked = false
      }
    },
    addorder (item) {
      // console.log('提交订单')
      this.$router.push('/order')
      // console.log(this.cartlist)
      let orderArr = []
      this.cartlist.map((item) => {
        // console.log(item.flag)
        if (item.flag) {
          orderArr.push(item)
          // console.log(orderArr)
        }
      })
      orderAdd(this.userid, orderArr).then(res => {
        // console.log(res)
        if (res.code === '200') {
          // console.log(res)
        } else {
          this.$router.push('/order' + res.data.orderid)
        }
      })
    }
  },
  mounted () {
    // this.loginStore().then(res => {
    //   console.log(res.code)
    //   if (res.code === 200) {
    let userid = localStorage.getItem('userid')
    let flag = 1
    address(userid, flag).then(res => {
      this.address = res.data.data[0].address
      this.flag = false
    })
    proFind(userid).then(res => {
      // console.log(res.data.data)
      this.cartlist = res.data.data
    })
    //   } else {
    //     Toast('未登录')
    //     this.$router.push('/login')
    //   }
    // })
  }
}
</script>
<style lang="scss" scoped>
    .cart{background: #f3f3f3;}
    .check{
          border: 0.01rem solid #f3f3f3;
          display: block;
          height: .2rem;
          width: .2rem;
          background-color: #fff;
          outline: none;
          border-radius: 0.1rem;
        }
    .goods-location{
        width: 100%;
        height: .4522rem;
        padding: 0 .15rem;
        margin-bottom: 0.08rem;
        background: #fff;
          span{
              display: inline-block;
          }
          .ico-moon{
              width: 0.15rem;
              height: 0.15rem;
              margin-right: 0.1rem;
              vertical-align: middle;
          }
          .addresss-box{
              color: #333;
              width: 3rem;
              height: 0.44rem;
              line-height: 0.44rem;
              font-size: 0.12rem;
              line-height: .44rem;
          }
    }
    .shopping-cart{
        .goods-list,.shopping-nav{
            width: 100%;
            height: 1.1rem;
            background: #fff;
            margin-bottom: 0.02rem;
            border-bottom: 0.01rem solid #f3f3f3;
            padding: 0 .15rem;
            .checked{
                width: 0.2rem;
                height: 0.2rem;
                float: left;
                margin-top: 0.45rem;
               .van-checkbox{
                  width: 0.2rem;
                  height: 0.2rem;
               }
            }
            .goods-content{
                width: 2.75rem;
                height: 1.08rem;
                padding: 0.15rem 0 0.15rem 0.125rem;
                float: left;
                .goods-cover{
                    width: .78rem;
                    height: .78rem;
                    margin-right: 0.12rem;
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .goods-box{
                    float: left;
                    .goods-title{
                        margin-bottom: 0.04rem;
                        color: #333;
                        font-size: 0.12rem;
                        width: 1.6rem;
                    }
                    .price-box{
                        width: 1.6rem;
                        height: .22rem;
                        .price{
                            display: inline-block;
                            width: .3622rem;
                            height: .22rem;
                            color: #ff0062;
                        }
                        .goods-num-box{
                            width: .8rem;
                            height: .2322rem;
                            display: inline-block;
                            float: right;
                            .goods-num-mius{
                                width: .25rem;
                                height: .22rem;
                                display: inline-block;
                                color: #999;
                                border: 0.01rem solid #ebebeb;
                                vertical-align: middle;
                                text-align: center;
                            }
                            .goods-num{
                                width: .3rem;
                                height: .22rem;
                                display: inline-block;
                                border: 0;
                                outline: none;
                                color: #333;
                                border: 0.01rem solid #ebebeb;
                                border-left: 0;
                                border-right: 0;
                                vertical-align: middle;
                                text-align: center;
                            }
                            .goods-num-plus{
                                width: .25rem;
                                height: .22rem;
                                display: inline-block;
                                color: #ff0062;
                                border: 0.01rem solid #ebebeb;
                                vertical-align: middle;
                                text-align: center;
                            }
                        }
                    }
                }
            }
            .delete{
              width: 0.35rem;
              height: 0.3rem;
              background: #f05;
              line-height: 0.3rem;
              font-size: .12rem;
              float: left;
              text-align: center;
              color: #fff;
              vertical-align: middle;
              margin: 0.35rem 0 0 0.15rem;
          }
        }
        .shopping-nav{
            height: 0.445rem;
        }
    }
    .shopping-nav{
        width: 100%;
        height: .445rem;
        padding: 0 0.15rem;
        position: fixed;
        bottom: 0.5rem;
        border-bottom: 0.02rem solid #f3f3f3;
        .checkdall{
            float: left;
            width: 1.58rem;
            height: 100%;
            padding-top: 0.12rem;
            .cart-checkall{
                width: 0.2rem;
                height: 0.2rem;
                line-height: .445rem;
            }
            .select-all{
                margin-left: 0.1rem;
            }
        }
        .total{
            float: left;
            line-height: 0.44rem;
            .lin{}
            .m15{
                color: #f05;
            }
        }
        .btn{
            float: right;
            background: #f05;
            width: 1rem;
            height: 0.36rem;
            text-align: center;
            padding: 0.01rem 0.06rem;
            line-height: 0.36rem;
            border-radius: 0.2rem;
            color: #fff;
            margin-top: 0.04rem;
        }
    }
    .van-goods-action{
        padding: 0 0.15rem;
        display: flex;
        justify-content: space-between;
    }
</style>
